<template>
  <div>
    <div id="myChart1" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  props: {
    orderLineChart: {
      type: [Array, Object],
      required: true
    }
  },
  data() {
    return {

    }
  },
  created() {
    setTimeout(() => {
      this.twoFall()
    }, 1000)
  },
  methods: {
    twoFall() {
      var myChart = echarts.init(document.getElementById('myChart1'))
      myChart.setOption({
        backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#FFEBCD'
        },
        {
          offset: 0.8,
          color: '#fff'
        }
        ], false),
        grid: {
          top: '20%',
          left: '10%',
          right: '10%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.orderLineChart.monthlyOrderList.map(item => item.dateTime),
          axisLabel: {
            margin: 30,
            color: 'balck'
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: true,
            length: 25,
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#ccc'
            }
          }
        },
        yAxis: [{
          type: 'value',
          position: 'right',
          axisLabel: {
            margin: 20,
            color: '#ccc'
          },

          axisTick: {
            show: true,
            length: 15,
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#ccc'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ccc',
              width: 2
            }
          }
        }],
        series: [{
          type: 'line',
          smooth: true, // 是否平滑曲线显示
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: '#ccc' // 线条颜色
            }
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#A52A2A'
            }
          },
          itemStyle: {
            color: 'red',
            borderColor: '#ccc',
            borderWidth: 3
          },
          tooltip: {
            show: false
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#FFD39B'
              },
              {
                offset: 1,
                color: '#EE7942'
              }
              ], false)
            }
          },
          data: this.orderLineChart.monthlyOrderList.map(item => item.orderNumber)
        }]
      })
    }
  }
}
</script>

  <style scoped>
    #myChart1{
      height: 260px;
      width: 565px;
    }
  </style>

